<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="viewport"
          content="height=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <title></title>
    <link rel="stylesheet" th:href="@{/mobile/css/common.css}"/>
    <link rel="stylesheet" th:href="@{/mobile/css/register.css}"/>
    <link rel="stylesheet" th:href="@{/mobile/layui/css/layui.css}"/>

</head>
<body>
<div class="register">
    <div class="regTop">
        <span>用户注册</span>
        <a class="back" href="index">&lt;&nbsp;返回</a>
    </div>
    <div class="content">
        <div class="point">
            <span>注册成功后，手机号为登录账号。</span>
        </div>
        <form id="form1">
            <div class="message">
                <input type="tel" placeholder="输入手机号" pattern="[0-9]{11}" id="phoneNumber" name="lAccount" required/>
                <input type="password" placeholder="请输入6-18位密码" pattern="[0-9A-Za-z]{6,18}" name="lPassword" required/>
                <input type="password" placeholder="请再次输入密码" pattern="[0-9A-Za-z]{6,18}" name="rPassword" required/>
                <input type="text" placeholder="输入验证码" pattern="[0-9]{6}" name="code" required/>
                <select name="rId">
                    <option value="choose">选择职位</option>
                    <option value="3">出租方</option>
                    <option value="4">租客</option>
                </select>
                <div class="icons">
                    <b><img th:src="@{/mobile/images/zc-1.jpg}" alt=""/></b>
                    <b><img th:src="@{/mobile/images/zc-2.jpg}" alt=""/></b>
                    <b><img th:src="@{/mobile/images/zc-3.jpg}" alt=""/></b>
                    <b><img th:src="@{/mobile/images/zc-3.jpg}" alt=""/></b>
                </div>
                <a class="code" href="javascript:void(0)" onclick="sendVerification()" required>获取验证码</a>
            </div>
            <input th:if="${param.invite}" type="hidden" id="invite" name="invite" th:value="${param.invite}">
        </form>
        <button class="submit" onclick="register()">注册</button>
    </div>
</div>
<script th:src="@{/mobile/js/jquery.min.js}"></script>
<script th:src="@{/mobile/layui/layui.js}"></script>
<script th:inline="javascript">
    var url = [[@{
        /}]];
        layui.use("layer", function () {
            var layer = layui.layer;
        });
</script>
<script>
    //发送短信验证码
    function sendVerification() {
        var phoneNumber = $("#phoneNumber").val();
        if (!(/^1[3456789]\d{9}$/.test(phoneNumber))) {
            layer.msg("请输入正确的电话号码", {icon: 5});
            return;
        }
        $.ajax({
            url: url + "user/sendVerification",
            data: "phoneNumber=" + phoneNumber,
            success: function (result) {
                layer.msg(result.msg);
            }
        })

    }

    //注册
    function register() {
        var params = $("#form1").serialize();
        $.post(url + "user/register", params, function (result) {
            if (result.code == 200) {
                window.location.href = "mlogin.html";
            }
            layer.msg(result.msg);
        })
    }


</script>


</body>
</html>